<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<parent-com :mny="mny" :list1="list" @changemny="receive"></parent-com>
	</div>
	<script src="./vue开发版.js"></script>
	<script>
		/*
			组件模版只能有一个根元素

		父子组件通信

		父组件向子组件传递数据
			父组件使用v-bind动态绑定数据
			绑定语法：v-bind：属性名(自己规定的)=值(要传递给子组件的数据)
			子组件使用props接受父组件传递过来的数据

			1.props:['value']:value是父组件传递过来的数据

			2.props是一个对象:{
				key(接受的数据):{
					type:string  //定义接受的数据类型
				
					default: value  //设置默认值，如果父组件传值，使用父组件的值，如果没传，可以自己设置一个默认值,如果默认值不是基本数据类型，要写成函数返回的形式

					required:true/false 必填/不必填空
				}
			}
			子组件向父组件通信 
			  方法：子组件使用$emit()向上广播事件
			   语法：$emit(“自定义事件名(必填)”,value(可选))
			    接受两个参数 第一个参数：必填

				父组件监听自定义事件 使用v-on:自定义事件名
		*/
		var vm = new Vue({
			el:"#app",
			data:{
				mny:100,
				list:['🍎','🍌','🍇']
			},
			methods:{
				receive(newMny){
					//子组件传递过来的新值
					this.mny = newMny
				}
			},
			components:{
				'parent-com':{
					//定义组件模版
					template:`
						<div class="parent">
							<h2>我是局部组件的父组件</h2>
							{{msg}}
							这是父亲给我的{{mny}}钱
							<ul>
							<li v-for="item in list1">{{item}}</li>
							</ul>
							
							<button @click="change">修改爸爸的钱</button>

							<child-com :mny="mny"></child-com>

						</div>
					`,
					data(){
						return {
							msg:'哈哈😄',
							num:2000
						}
					},
					methods:{
						change(){
							this.$emit("changemny",this.num)
						}
					},
					// props:['mny','list1'],
					props:{
						'mny':{
							// type:Number 限制一种数据类型
							type:[Number,String],//写多个数据类型

						    //type:String 报错

							default:300  //设置默认值，如果父组件传值，使用父组件的值，如果没传，可以自己设置一个默认在
						}, 
						'list1':{
							type:Array,
							required:true,
							// default:['🍎','🍌','🍇'] 不能写

							default(){ //默认值形式 要写成函数返回的形式
								return ['a a','b b','c c']
							} 
						}
					},
					//子组件使用props接受数据
					components:{
						'child-com':{
							template:`
								<div>
									<h2>我是子组件</h2>
									这是爸爸的爸爸给我的{{mny}}钱
								</div>
							`,
							props:['mny']
						}
					},
					
				}
			}
		})
	</script>
</body>
</html>